import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import {
  TextArea,
  TextField,
  MultiColumnList,
  Button,
  Col,
  Row,
 
} from '@folio/stripes/components';
 
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import moment from 'moment-timezone';
 
function validate(values, props) {
  const errors = {};
  if (!values || !values.prisonTerm) {
    errors.prisonTerm = (
      <FormattedMessage id="ui-party.errors.missingRequiredField" />
    );
  }
  if (!values || !values.foulDescription) {
    errors.foulDescription = (
      <FormattedMessage id="ui-party.errors.missingRequiredField" />
    );
  }
  return errors;
}

class EditForm extends Component {
  // eslint-disable-next-line react/sort-comp
  constructor(props) {
    super(props);
    this.state = {
      open: true,
      show: false,
      editsStatus: 'success',
      barcode:'',
      userList:[],
      selectedUserList:[],
      userListHeight:0,
      selectedUserListHeight:0
    };
  }

  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    // eslint-disable-next-line react/no-unused-prop-types
    initialValues: PropTypes.object,
    // eslint-disable-next-line react/no-unused-prop-types
    dictionary: PropTypes.object,
    // eslint-disable-next-line react/no-unused-prop-types
    cleanSearch: PropTypes.func,
    intl: PropTypes.func,
    cancel: PropTypes.func,

   
    stripes:PropTypes.object,
  };
  
  commitData=()=>{
    const { handleSubmit ,setSelectedUserData} = this.props;
     
    setSelectedUserData(this.state.selectedUserList,()=>{
        handleSubmit()
    })
  }

  render() {
    const footer = (

      <div>
        <Button onClick={this.props.cancel}>
          <FormattedMessage id="ui-party.cancel" />
        </Button>
        <Button buttonStyle="primary" marginBottom0 type="button" onClick={()=>{
            this.commitData()
        }}>
          <FormattedMessage id="ui-party.saveAndExit" />
        </Button>
      </div>

    );
    const { handleSubmit, intl,findUserHttpInvoke } = this.props;
  
    return (
      <Row center="xs" style={{ width: '100%' }}>
        <Col xs={3}>
        </Col>
        <Col xs={6}>
        <TextField
          label={
            <FormattedMessage id="ui-party.loans.columns.party.blocklist.barcode" />
          }
         placeholder="请输入读者证号进行查询"
         onChange={(values)=>{
             if(!!values){
                 this.setState({barcode:values.target.value})
             }else{
                this.setState({barcode:''})
             }
         }}
        />
         <Button  onClick={()=>{
           const barcode = this.state.barcode
           if(!!barcode){
               findUserHttpInvoke.GET({ params: { query: barcode }}).then(res=>{
                   this.setState({userList:res.users,userListHeight:250})
               })
           }
         }}>
          <FormattedMessage id="ui-party.search" />
        </Button>
        </Col>
        <Col xs={3}>
        </Col>
        <Col xs={3}>
        </Col>
        <Col xs={6} style={{height:this.state.userListHeight}}>
        <MultiColumnList
          autosize
          virtualize
          interactive={false}

          isEmptyMessage={<FormattedMessage id="ui-party.empty.list" />} // 空数据提示
        
          contentData={this.state.userList}
      
          columnMapping={ {
            serialNumber: (
                <FormattedMessage id="ui-party.loans.columns.serialNumber" />
              ),
            username:  <FormattedMessage id="ui-party.loans.columns.readerName" />,
            barcode:<FormattedMessage id="ui-party.loans.columns.readerAccount" />,
            edit:  <FormattedMessage id="ui-party.loans.columns.operating" />,
          }}
          columnWidths={{
            serialNumber:'10%',  
            username: '30%',
            barcode: '30%',
            edit: '30%'
          }}
          visibleColumns={['serialNumber','username', 'barcode', 'edit']}
          formatter={{
            edit: item => [
              <Button
                onClick={() => {
                  const list=this.state.selectedUserList;
                  let ed = list.find(a=>{return a.barcode === item.barcode})
                  if(!ed){
                    list.push(item);
                    this.setState({
                        selectedUserList:list,
                        selectedUserListHeight:250
                    })
                  }
                }}
              >
                {intl.formatMessage({ id: 'ui-party.select' })}
              </Button>
            ],
            serialNumber: item => [<span>{item.rowIndex + 1}</span>]
          }}
          />
            </Col>
       <Col xs={3}>
        </Col>
        <Col xs={3}>
        </Col>
        <Col xs={6} style={{height:50}}>
            <div style={{padding:15,display:this.state.selectedUserListHeight===250?'block':'none'}}>
                <span style={{
                      fontSize: '1.3rem',
                      fontWeight: '600',
                      marginLeft: '25px' 
                }}> 
                已选择
                </span>
                <span style={{float:'right'}}><Button onClick={()=>{
                    if(confirm('你确定要清空已选择的用户?')){
                        this.setState({selectedUserList:[],selectedUserListHeight:0})
                    }
                }}><FormattedMessage id="ui-party.reset" /></Button></span>
            </div>
        </Col>
        <Col xs={3}>
        </Col>
        <Col xs={3}>
        </Col>

        <Col xs={6} style={{height:this.state.selectedUserListHeight}}>
        <MultiColumnList
          autosize
          virtualize
          interactive={false}

          isEmptyMessage={<FormattedMessage id="ui-party.empty.list" />} // 空数据提示
        
          contentData={this.state.selectedUserList}
      
          columnMapping={ {
            serialNumber: (
                <FormattedMessage id="ui-party.loans.columns.serialNumber" />
              ),
            username:  <FormattedMessage id="ui-party.loans.columns.readerName" />,
            barcode:<FormattedMessage id="ui-party.loans.columns.readerAccount" />,
            edit:  <FormattedMessage id="ui-party.loans.columns.operating" />,
          }}
          columnWidths={{
            serialNumber:'10%',  
            username: '30%',
            barcode: '30%',
            edit: '30%'
          }}
          visibleColumns={['serialNumber','username', 'barcode', 'edit']}
          formatter={{
            edit: item => [
              <Button
                onClick={() => {
                  const list=this.state.selectedUserList;
                  let ed = list.filter(a=>{return a.barcode !== item.barcode})
                  let selectedUserListHeight = ed.length === 0?0:250
                  this.setState({
                        selectedUserList:ed,
                        selectedUserListHeight
                  })
                 
                }}
              >
                {intl.formatMessage({ id: 'ui-party.cancel' })}
              </Button>
            ],
            serialNumber: item => [<span>{item.rowIndex + 1}</span>]
          }}
          />
        </Col>
        <Col xs={3}>
        </Col>
        <Col xs={6}>

          <form data-test-form-page id="form-add" onSubmit={handleSubmit}>
            
             <Field
              label={<FormattedMessage id="ui-party.loans.columns.party.blocklist.prisonTerm" />}
              placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.blocklist.prisonTerm' })}
              name="prisonTerm"
              component={DatePerfectChoice}
              dateFormat="YYYY-MM-DD"
              exclude={(day)=>{
              const ISOFormat = 'YYYY-MM-DD HH:mm:ss';
              return day.isBefore(moment().subtract(1, 'day'),ISOFormat);
               }}
              isClear
               required
             />
           <Field
              component={TextArea}
              name="foulDescription"
              label={
                <FormattedMessage id="ui-party.loans.columns.party.blocklist.foulDescription" />
              }
              style={{ height: '150px' }}
              required
            />
            {footer}
          </form>
        </Col>
 
      </Row>
    );
  }
}

export default injectIntl(
  reduxForm({
    form: 'blackListAddForm' + new Date().getTime(),
    validate,
    navigationCheck: true,
    enableReinitialize: true
  })(EditForm)
);
